<template>
  <div>
    <!-- {{ list }} -->
    <!-- 标签的table组件 -->
    <Table :data="$store.state.list">
      <template #q="obj">
        {{ obj.row.id }}
        <button @click="ff(obj.row)">查看</button>
        <button @click="fn(obj.row.id)">删除</button>
        <button @click="fw">新增</button>
      </template>
    </Table>

    <Kan width="300px" heigth="300px" :flag="flag">
      <template #bb>
        序号：<input type="text" v-model="Data.id" /> <br />
        书名： <input type="text" v-model="Data.bookname" /> <br />
        作者：
        <input type="text" v-model="Data.author" /> <br />
        出版社：
        <input type="text" v-model="Data.publisher" />

        <button @click="fh">取消</button>
        <button @click="fg(Data.id)">修改</button>
      </template>
    </Kan>
    <SanChu width="300px" heigth="300px" :flag1="flag1">
      <template #aa>
        序号：<input type="text" v-model="Data1.id" /> <br />
        书名： <input type="text" v-model="Data1.bookname" /> <br />
        作者：
        <input type="text" v-model="Data1.author" /> <br />
        出版社：
        <input type="text" v-model="Data1.publisher" />

        <button @click="fh1">取消</button>
        <button @click="fg1">新增</button>
      </template>
    </SanChu>
  </div>
</template>
<script>
import Table from './Anli/Table.vue'
import Kan from './Anli/Kan.vue'
import axios from 'axios'
import SanChu from './Anli/SanChu.vue'
import { mapState } from 'vuex'
export default {
  name: '',
  components: {
    Table,
    Kan,
    SanChu

  },
  data () {
    return {
      flag: false,
      flag1: false,
      Data: {
        id: '',
        bookname: '',
        author: '',
        publisher: ''
      },
      Data1: {
        id: '',
        bookname: '',
        author: '',
        publisher: ''
      },
      // list: []
    }
  },
  created () {
    // console.log(this.list);
    // console.log(this.$store.state.list);
    // console.log(this.$store.dispatch('getList'));
    // console.log(this.$store.state.list);
    this.$store.dispatch('getList')
  },
  mounted () {

  },
  computed: {
    // ...mapState('list')
  },
  methods: {
    fn (id) {
      this.$store.dispatch('fn', id)
    },
    async ff (e) {
      this.flag = true
      let res = await axios.get('http://ajax-api.itheima.net/api/books/' + e.id)
      this.Data = JSON.parse(JSON.stringify(e))
    },
    async fw (e) {
      this.flag1 = true
    },
    fh () {
      this.flag = false
    },
    fh1 () {
      this.flag1 = false
    },
    async fg (id) {
      await axios({
        url: 'http://ajax-api.itheima.net/api/books/' + id,
        method: 'put',
        data: {
          bookname: this.Data.bookname,
          author: this.Data.author,
          publisher: this.Data.author
        }
      })
      let aa = this.list.find(item => item.id == id)
      aa.bookname = this.Data.bookname
      aa.author = this.Data.author
      aa.publisher = this.Data.publisher
      this.flag = false
    },
    async fg1 (id) {
      axios({
        url: 'http://ajax-api.itheima.net/api/books',
        method: 'post',
        data: {
          bookname: this.Data1.bookname,
          author: this.Data1.author,
          publisher: this.Data1.author
        }
      })

      this.list.push(this.Data1)
      this.flag1 = false
    }
  }
}
</script>
<style lang='less'  scoped>
</style>

